<template>
	<view class="content" v-if="show">
		<view class="text">选择车辆</view>
		<view class="ul">
			<block  v-for="item in cars" :key="item.id">
				<view class="li" @click="selected(item)"><text>车辆名称：{{item.car_name}}</text><text>车牌号码：{{item.car_code}}</text></view>
			</block>
			
		</view>
	</view>
</template>

<script>	
	import {
		apiUrl
	} from '@/api/base.js'
	
	export default {	
		props:{
			show:Boolean
		},			
		data() {
			return {				
				cars: ''				
			}
		},
		created() {
			this.getCars()			
		},
		onShow() {

		},
		methods: {	
			selected(obj){
				this.$emit('selectCar',obj)
			},
			getCars() {				
				uni.request({
					url: apiUrl + "addons/car/car",
					data: {},
					method: "GET",
					success: (res) => {
						this.cars=res.data.data						
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		position: fixed;
		top: 0; left: 0;
		width:100%;
		height: 100%;
		background-color: #FFFFFF;
		z-index: 99999;
		
	}	
	.text{
		font-size: 40rpx;	
		background-color: #57B816;
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;		
	}
	.ul{
		padding: 20rpx;	
		
		.li{
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #4CD964;
			border: #E1E1E1 1rpx solid;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #FFFFFF;
			margin-bottom: 20rpx;
		}
	}
</style>
